<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.js"></script>
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        input {
            border-radius: 5%;
            padding: 2px 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }

        body {
            background-image: url(${pageContext.request.contextPath}/static/images/userInfor.jpg);
            background-repeat: no-repeat;
            background-size: cover;
        }

        .nav {
            width: 70%;
            height: 800px;
            background: rgb(105, 111, 112, 0.4);
            margin: 0 auto;
        }

        .intro {
            width: 70%;
            height: 60px;
            margin: 0 auto;
            font-family: "KaiTi";
            margin-top: 80px;
        }

        .intro img {
            width: 80px;
            height: 60px;
            float: left;
        }

        .intro h1 {
            float: left;
            height: 60px;
            line-height: 60px;
            font-size: 20px;
            color: white;
        }

        .second {
            display: inline-block;
            height: 60px;
            line-height: 60px
        }

        .main {
            height: 800px;
            margin: 0 auto;
            position: relative;

        }

        .lan {
            height: 90px;
            padding-top: 40px;
        }

        .nav .main .lan label {
            font-family: YouYuan;
            display: inline-block;
            text-align: right;
            width: 100px;
            height: 30px;
            font-size: 20px;
            color: white;
        }

        .nav .main .lan input {
            height: 25px;
            width: 300px;
        }

        .nav .main #decide {
            width: 90px;
            height: 60px;
            padding-top: 40px;
            margin: 0 auto;
        }

        .nav .main #decide button {
            height: 55px;
            width: 115px;
            background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
            border: 0;

            border-radius: 24px;
            color: white;
            font-family: "KaiTi";
            font-size: 20px;
        }

        .nav .main #decide button:hover {
            background-image: linear-gradient(120deg, #fdfbfb 0%, #ebedee 100%);
            color: black;
        }

        .arrow {
            width: 15px;
            height: 15px;
            border-top: 1.5px solid #fff;
            border-right: 1.5px solid #fff;
            position: absolute;
            left: 43px;
            top: 32px;
            transform: rotate(225deg);
        }

        #tp {
            z-index: 1;
            width: 120px;
            height: 150px;
            float: right;
            margin-right: 250px;
            margin-top: 100px;
        }

        #tp1 {
            height: 80%;
            border: 2px solid white;
        }

        #changeps {
            background-image: linear-gradient(to left, #BDBBBE 0%, #9D9EA3 100%), radial-gradient(88% 271%, rgba(255, 255, 255, 0.25) 0%, rgba(254, 254, 254, 0.25) 1%, rgba(0, 0, 0, 0.25) 100%), radial-gradient(50% 100%, rgba(255, 255, 255, 0.30) 0%, rgba(0, 0, 0, 0.30) 100%);
            background-blend-mode: normal, lighten, soft-light;
            height: 29px;
            width: 60px;
            color: white;
            text-align: center;
            padding: 6px 1px;
            font-size: small;
            position: absolute;
            top: 27.6%;
            left: 32.7%;
        }

        #changeps:hover {
            background-image: linear-gradient(to top, #d5d4d0 0%, #d5d4d0 1%, #eeeeec 31%, #efeeec 75%, #e9e9e7 100%);
            color: black;
        }

        /* 上传按钮 */

        .bt-box {
            margin-top: 8px;
            position: relative;
        }

        .file-ipt {
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }

        .bt {
            padding: 6px 1px;
            display: block;
            width: 100px;
            height: 30px;
            background-image: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            color: black;
            margin-right: 80px;
            border: none;
            border-radius: 12px;
            margin: 0 auto;
        }

        #password {
            width: 240px;
        }
    </style>
    <script>
        function uploadImg(file) {
            if (file.files && file.files[0]) {
                var img = document.getElementById('img');
                var reader = new FileReader();
                reader.readAsDataURL(file.files[0]);
                reader.onloadend = function (e) {
                    img.src = e.target.result;
                }
            }
        }
    </script>
</head>
<body>
<a href="javascript: window. history.back()">
    <div class="arrow"></div>
</a>
<div class="intro">
    <img src="${pageContext.request.contextPath}/static/images/logo.png" alt="">
    <h1>我的信息</h1>
</div>
<div class="nav">
    <div class="main">
        <!-- 添加模态框 -->
        <div class="modal fade" id="changeModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
             aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">修改密码</h4>
                    </div>
                    <form action="${pageContext.request.contextPath}/user/changePassword" id="lg-form" name="lg-form" class="form-horizontal" method="post">
                        <input type="hidden" name="email" value="${sessionScope.userMessage.email}">
                        <div class="modal-body">
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="ropsd">原密码</label>
                                <div class="col-sm-9">
                                    <input id="ropsd" type="password" class="form-control" />
                                    <!-- 没用submit，require失效 -->
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="psd">新密码</label>
                                <div class="col-sm-9">
                                    <input id="psd" type="password" name="password" class="form-control"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="repsd">确认密码</label>
                                <div class="col-sm-9">
                                    <input id="repsd" type="password" class="form-control" />
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="submit" id="sava-edit-btn" class="btn btn-primary">确定</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <form action="${pageContext.request.contextPath}/user/editMyself?email=${user.email}" method="post" enctype="multipart/form-data">
            <div class="lan" id="fl">
                <label class="fontuy" for="email">邮箱：</label>
                <input type="email" id="email" class="one" placeholder="邮箱：" value="${user.email}" readonly>
                <div id="tp">
                    <div id="tp1">
                        <img src="${user.profilePath}" width="100%" height="100%" alt="" class="img" id="img">
                    </div>
                    <div class="bt-box">
                        <button id="changepic" class="bt">修改头像</button>
                        <input type="file" id="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"
                               class="file-ipt" name="file" onchange="uploadImg(this)">
                    </div>
                </div>
            </div>
            <div class="lan">
                <label for="text">用户名：</label>
                <input type="text" id="text" class="one" name="userName" placeholder="用户名" value="${user.userName}">
            </div>
            <div class="lan">
                <label for="password">密码：</label>
                <input type="password" id="password" class="one" name="password" placeholder="密码" value="${user.password}"
                       readonly>
                <!-- <button id="changeps">修改密码</button> -->

            </div>
            <div class="lan">
                <label for="text">手机号：</label>
                <input type="text" id="number" class="one" name="telephone" placeholder="手机号码"
                       value="${user.telephone}">
            </div>
            <input type="hidden" name="profilePath" value="${user.profilePath}">
            <div id="decide">
                <button>保存信息</button>
            </div>
        </form>

        <button id="changeps" class="btn btn-primary " data-toggle="modal" data-target="#changeModal">
            修改密码</button>


    </div>
</div>

</body>
<script>
    var lgform = document.getElementById("lg-form");
    var password = document.getElementById("password");
    var roPassword = document.getElementById("ropsd");
    var newPassword = document.getElementById("psd");
    var newRepassword = document.getElementById("repsd");
    var reg = /^\s*$/;
    $("#sava-edit-btn").click(function () {
        // console.log("kk");
        if (reg.test(roPassword.value)) {
            alert("输入不能为空");
            return false;
        }
        else if (roPassword.value != password.value) {
            alert("原密码输入错误,请重新输入");
            roPassword.value = "";
            return false;

        } else if (reg.test(newPassword.value) || reg.test(newRepassword.value)) {
            alert("输入不能为空");
            return false;
        }
        else if (newPassword.value != newRepassword.value) {
            alert("两次新密码不一样,请重新输入");
            newPassword.value = "";
            newRepassword.value = "";
            return false;
        } else if (newPassword.value == roPassword.value) {
            alert("新旧密码不能一致，请重新输入");
            newPassword.value = "";
            newRepassword.value = "";
            return false;
        }
        else {
            // console.log(typeof newPassword.value);
            // console.log(newPassword.value);
            $('#password').attr("value", newPassword.value);
            roPassword.value = "";
            // newPassword.value = "";
            newRepassword.value = "";
            console.log("flag01!");
            $('#changeModal').modal('hide');
            console.log("flag!");
            return true;
        }
    })
</script>

</html>